<template>
  <div>
    <el-dialog title="新增隔离人" :visible.sync="dialogVisible" width="750px" :before-close="closeDialog"
      :close-on-click-modal="false" :append-to-body="true" top="8vh">
      <el-form :model="addForm" :rules="rules" ref="refForm" label-width="90px" class="form">
        <div class="title1">隔离点</div>
        <el-form-item size="small" label="组织机构" prop="orgId">
          <el-select v-model="addForm.orgId" filterable placeholder="请选择单位" style="width: 250px" clearable
            @change="changeOrgId" v-loadMore="loadMore">
            <el-option v-for="item in orgList" :key="item.id" :label="item.orgName" :value="item.id">
            </el-option>
            <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'"> </div>
          </el-select>

        </el-form-item>
        <el-form-item size="small" label="建筑" prop="buildId">
          <el-select v-model="addForm.buildId" placeholder="请选择所属建筑" filterable style="width: 250px" @change="changeBuild"
            v-loadMore="loadMore2">
            <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
            <div class="div_box" v-loading="loading2" :style="loading2 ? '' : 'display: none;'"> </div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="楼层" prop="floorId" v-if="flag">
          <el-select v-model="addForm.floorId" placeholder="请选择所属楼层" style="width: 250px" @change="changeFloor" filterable
            v-loadMore="loadMore3">
            <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
            <div class="div_box" v-loading="loading3" :style="loading3 ? '' : 'display: none;'"> </div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="安装点" prop="spaceId" v-if="spflag">
          <el-select v-model="addForm.spaceId" placeholder="请选择安装点" style="width: 250px" filterable
            v-loadMore="loadMore4">
            <el-option v-for="item in spaceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
            <div class="div_box" v-loading="loading4" :style="loading4 ? '' : 'display: none;'"> </div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="因素" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择隔离因素" style="width: 250px">
            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="类型" prop="isolationType">
          <el-select v-model="addForm.isolationType" placeholder="请选择隔离类型" style="width: 250px">
            <el-option v-for="item in isolationTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="省市区" prop="region">
          <el-cascader v-model="addForm.region" placeholder="请选择来源地区" :options="provinceCityAreaData"
            :props="{ expandTrigger: 'hover' }" filterable @change="changeProvinceCityArea" style="width: 250px">
          </el-cascader>
        </el-form-item>
        <el-form-item size="small" label="隔离开始" prop="startTime">
          <el-date-picker v-model="addForm.startTime" type="datetime" style="width: 250px" placeholder="选择隔离开始时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item size="small" label="隔离天数" prop="days">
          <el-select v-model="addForm.days" placeholder="请选择隔离天数" style="width: 250px" filterable>
            <el-option v-for="item in dayList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :model="addForm1" :rules="rules1" ref="refForm1" label-width="90px" class="form">
        <div class="title1">
          隔离人
          <i class="el-icon-circle-plus-outline" @click="addPerson"></i>
        </div>
        <div v-for="(item, index) in addForm1.personList" :key="index" class="list">
          <el-form-item size="small" :label="'隔离人' + (index + 1)" :prop="`personList.${index}.name`" :rules="rules1.name">
            <el-input clearable v-model="item.name" placeholder="隔离人姓名" style="width: 250px" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item size="small" :prop="`personList.${index}.mobile`">
            <el-input oninput="value=value.replace(/[^\d]/g,'')" @blur="item.mobile = $event.target.value" clearable
              v-model="item.mobile" placeholder="隔离人手机号" style="width: 250px" maxlength="11"></el-input>
          </el-form-item>
          <el-form-item size="small" :prop="`personList.${index}.gender`" :rules="rules1.gender">
            <el-select v-model="item.gender" placeholder="请选择隔离人性别" style="width: 250px">
              <el-option v-for="item in genderList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item size="small" :prop="`personList.${index}.idCard`">
            <el-input clearable v-model="item.idCard" placeholder="隔离人身份证号" style="width: 250px" maxlength="18"
              oninput="value=value.replace(/[\W]/g,'')"></el-input>
          </el-form-item>
          <div v-if="index !== 0" class="del el-icon-remove-outline" @click="delPerson(index)"></div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="submit" class="confirm-button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqOrgList, reqSpaceManager, reqIsolationPersonAdd } from "@/api/api";
import { provinceCityAreaArray } from "@utils/province-city-area";
import TreeSelSearch from "../../../components/TreeSelSearch.vue";
import rulesMixin from "../mixins/rules.js";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";

let arr = [];
for (let i = 1; i <= 30; i++) {
  arr.push({ value: i, label: i });
}
export default {
  mixins: [rulesMixin,loadMore],
  components: { TreeSelSearch },
  data() {
    return {
      flag: false,
      spflag: false,
      dialogVisible: false,
      orgList: [],
      buildList: [],
      floorList: [],
      spaceList: [],
      typeList: [
        {
          value: "1",
          label: "密接",
        },
        {
          value: "2",
          label: "次密接",
        },
        {
          value: "3",
          label: "确诊",
        },
      ], //因素
      isolationTypeList: [
        {
          value: "1",
          label: "居家隔离",
        },
        {
          value: "2",
          label: "酒店隔离",
        },
        {
          value: "3",
          label: "定点医院隔离",
        },
        {
          value: "4",
          label: "其他隔离",
        },
      ],
      provinceCityAreaData: provinceCityAreaArray,
      dayList: arr,
      genderList: [
        {
          value: "0",
          label: "女",
        },
        {
          value: "1",
          label: "男",
        },
      ],
      addForm: {
        orgId: "",
        buildId: "",
        floorId: "",
        spaceId: "",
        type: "", //因素
        isolationStatus: "",
        isolationType: "", //类型
        region: "",
        fromCityName: "",
        startTime: "",
        days: "",
      },
      addForm1: {
        personList: [
          {
            name: "",
            mobile: "",
            gender: "",
            idCard: "",
          },
        ],
      },
      loading: false,
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      sysInstanceIndex2: 1,
      sysInstanceTotalPages2: 10,
      loading2: false,
      sysInstanceIndex3: 1,
      sysInstanceTotalPages3: 10,
      loading3: false,
      sysInstanceIndex4: 1,
      sysInstanceTotalPages4: 10,
      loading4: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() { },
  methods: {
    async loadMore() {
      if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10)) return
      this.sysInstanceIndex++;
      this.loading = true;
      // 获取列表数据的方法
      await this.getOrgList()
      this.loading = false;
    },
    // 获取单位列表
    async getOrgList() {
      let res = await reqOrgList( {
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.orgList = res.data.rows
    },
    // 选择单位
    changeOrgId() {
     this.sysInstanceIndex2 =1
      this.sysInstanceTotalPages2= 10
      this.sysInstanceIndex3 =1
      this.sysInstanceTotalPages3= 10
      this.sysInstanceIndex4=1
      this.sysInstanceTotalPages4= 10
      this.buildList = this.floorList = this.spaceList = [];
      this.addForm.buildId = this.addForm.floorId = this.addForm.spaceId = "";
      this.getBuildList();
    },

    // 建筑物下拉
    async loadMore2() {
      if (this.sysInstanceIndex2 >= Math.ceil(this.sysInstanceTotalPages2 / 10)) return
      this.sysInstanceIndex2++;
      this.loading2 = true;
      // 获取列表数据的方法
      await this.getBuildList()
      this.loading2 = false;
    },
    // 获取建筑物列表
    async getBuildList() {
      let res = await reqSpaceManager(this.sysInstanceIndex2, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        metaCode: 1,
        isStatistics:0
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages2 = res.data.total
      this.buildList = [...this.buildList, ...res.data.rows]
    },
    // 选择建筑物
    changeBuild() {
      this.sysInstanceIndex3 =1
      this.sysInstanceTotalPages3= 10
      this.sysInstanceIndex4=1
      this.sysInstanceTotalPages4= 10
      this.floorList = this.spaceList = [];
      this.addForm.floorId = this.addForm.spaceId = "";
      this.flag = true
      this.getFloorList();
    },

    async loadMore3() {
      if (this.sysInstanceIndex3 >= Math.ceil(this.sysInstanceTotalPages3 / 10)) return
      this.sysInstanceIndex3++;
      this.loading3 = true;
      // 获取列表数据的方法
      await this.getFloorList()
      this.loading3 = false;
    },
    // 获取楼层列表
    async getFloorList() {
      let res = await reqSpaceManager(this.sysInstanceIndex3, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        parentId: this.addForm.buildId,
        metaCode: 2,
        isStatistics:0
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages3 = res.data.total
      this.floorList = [...this.floorList, ...res.data.rows]
    },
    // 选择楼层
    changeFloor() {
      this.sysInstanceIndex4=1
      this.sysInstanceTotalPages4= 10
      this.spaceList = [];
      this.addForm.spaceId = "";
      this.spflag = true;
      this.getSpaceList();
    },

    async loadMore4() {
      if (this.sysInstanceIndex4 >= Math.ceil(this.sysInstanceTotalPages4 / 10)) return
      this.sysInstanceIndex4++;
      this.loading4 = true;
      // 获取列表数据的方法
      await this.getSpaceList()
      this.loading4 = false;
    },
    // 获取安装点列表
    async getSpaceList() {
      let res = await reqSpaceManager(this.sysInstanceIndex4, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        parentId: this.addForm.floorId,
        metaCode: 3,
        isStatistics:0
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages4 = res.data.total
      this.spaceList = [...this.spaceList, ...res.data.rows]
    },
    // 省市区获取
    changeProvinceCityArea(val) {
      this.addForm.fromCityName = `${val[0]}${val[1]}${val[2]}`;
      this.addForm.region = [val[0], val[1], val[2]];
    },
    // 点击新增隔离人
    addPerson() {
      this.$notify.closeAll();
      if (this.addForm1.personList.length >= 5)
        return this.$modal.notifyWarning("一次最多添加5个隔离人");
      // let id = personList[personList.length - 1].id + 1;
      this.addForm1.personList.push({
        // id,
        name: "",
        gender: "",
        mobile: "",
        idCard: "",
      });
    },
    // 点击删除隔离人
    delPerson(index) {
      this.addForm1.personList.splice(index, 1);
    },
    // 确定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        this.$refs.refForm1.validate(async (valid1) => {
          if (!valid)
            return
          if (!valid1)
            return
          let params = {
            orgId: this.addForm.orgId,
            parkId: this.addForm.parkId,
            spaceId: this.addForm.spaceId,
            type: this.addForm.type,
            isolationStatus: "2",
            isolationType: this.addForm.isolationType,
            fromCityName: this.addForm.fromCityName,
            startTime: this.addForm.startTime,
            days: this.addForm.days,
            isolationPersonList: this.addForm1.personList,
          };
          this.reqIsolationPersonAddFun(params);
        });
      });
    },
    // 接口请求新增隔离人
    async reqIsolationPersonAddFun(params) {
      const res = await reqIsolationPersonAdd(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("新增成功");
      this.$parent.getDataList();
      this.$parent.getIsolationPersonToday();
      this.closeDialog();
    },
    // 点击关闭弹框
    closeDialog() {
      this.$refs.refForm.resetFields();
      this.$refs.refForm1.resetFields();
      this.addForm1.personList = [
        { name: "", mobile: "", gender: "", idCard: "" },
      ];
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");

.form {
  display: flex;
  flex-wrap: wrap;

  .list {
    display: flex;
    flex-wrap: wrap;

    .del {
      position: absolute;
      right: 20px;
      color: #d32f34;
      font-weight: 600;
      font-size: 18px;
      cursor: pointer;
      margin-top: 35px;

      &:hover {
        opacity: 0.7;
      }
    }
  }
}

.title1 {
  width: 100%;
  color: @primaryThemeTxtColor;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
  margin-left: 10px;

  &::before {
    content: "";
    border-left: 4px solid #7367f0;
    margin-right: 8px;
  }

  .el-icon-circle-plus-outline {
    margin-left: 5px;
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }
  }
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
  // background: red;
  // opacity: 0.5;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束
</style>